<template>
  <div class="screenfull">
    <!-- ant-design:fullscreen-outlined -->
    <svg-icon
      @click="handleClick"
      :icon-name="
        isFullScreen
          ? 'ant-design:fullscreen-exit-outlined'
          : 'ant-design:fullscreen-outlined'
      "
    ></svg-icon>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import screenfull from 'screenfull'
const isFullScreen = ref(false)

function handleClick() {
  if (screenfull.isEnabled) {
    screenfull.toggle()
    return false
  }
  ElMessage('浏览器不支持全屏')
}

function updateFullscreenStatus() {
  // 是否是全屏，切换状态
  isFullScreen.value = screenfull.isFullscreen
}

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfull.on('change', updateFullscreenStatus)
  }
})

onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', updateFullscreenStatus)
  }
})
</script>

<style lang="scss" scoped>
.screenfull {
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  margin-left: 15px;
  margin-top: 5px;
  font-size: 20px;
  cursor: pointer;
}
</style>
